<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/sytle.css?v=0.2&d=2016-11-08">
<title>临时保洁-选择面积</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="hgj">
  <div class="page-all"> 
    <!--头部开始-->
    <header>
      <div class="navbar">
        <ul>
          <li class="l-back"><a href="/"><img src="${pageContext.request.contextPath}/images/left.png" alt="返回"/></a></li>
          <li class="n-word">临时保洁</li>
          <li class="n-intro"><a href="${pageContext.request.contextPath}/goods/cleanInfo.html"><H4 style="color:#000">服务介绍</H4></a></li>
        </ul>
      </div>
    </header>
    <!---内容开始--->
    <div class="container">
      <section class="p-num">
        <div class="p-num-top"><img src="${pageContext.request.contextPath}/images/peopel-num.png"/><span class="p-n-word">请选择服务人数</span></div>
        <div class="p-num-foot"><span class="be-selected" onclick="setStaff(1)">1人</span><span  onclick="setStaff(2)">2人</span></div>
      </section>
      <!--选择服务时长开始-->
      <section class="p-time">
        <div class="p-time-top"><img src="${pageContext.request.contextPath}/images/time-length.png"/><span class="p-t-word">请选择服务时长</span><img src="${pageContext.request.contextPath}/images/question.png"/ class="question"></div>
        <div class="p-time-foot"><span class="be-selected" onclick="setHouse(0)">2小时</span><span  onclick="setHouse(1)">3小时</span><span onclick="setHouse(2)">4小时</span><br>
          <span onclick="setHouse(2)">4小时</span><span onclick="setHouse(3)">5小时</span><span onclick="setHouse(4)">6小时</span> <span onclick="setHouse(5)">7小时</span><span onclick="setHouse(6)">8小时</span><span onclick="setHouse(7)">9小时</span> </div>
      </section>
      <!--选择上门时间开始-->
      <section class="p-date">
        <div class="p-date-top"><img src="${pageContext.request.contextPath}/images/long-date.png"/><span class="p-d-word">请选择上门服务时间</span></div>
        <div class="p-date-foot"> <span class="p-d" id="dayValue">${CURRENT_DAY}</span> <span class="p-t" id="time">${CURRENT_TIME}</span> </div>
      </section>
      <!--温馨提示--->
      <div class="remind">
        <p>温馨提示：</p>
        <span>单价：<em>30/小时</em>（为单人服务价格，2人服务价格翻倍）<br>
        夜间：<em>40/小时</em>(18:00后预约)</span></div>
    </div>
    <!---弹窗开始---> 
    <!--点击问号图标的弹窗-->
    <div class="layer-help" style=" display:none;">
      <table class="t-help">
        <tr>
          <th>房屋面积</th>
          <th>打扫时长参考</th>
        </tr>
        <tr>
          <td>60m2-80m2</td>
          <td>2-3小时</td>
        </tr>
        <tr>
          <td>80m2-120m2</td>
          <td>3-4小时</td>
        </tr>
        <tr>
          <td>120m2-140m2</td>
          <td>4-6小时</td>
        </tr>
        <tr>
          <td>140m2-170m2</td>
          <td>6-8小时</td>
        </tr>
        <tr>
          <td>170m2以上</td>
          <td>8小时以上</td>
        </tr>
      </table>
      <p>时长仅供参考，您可根据房屋实际情况适当调整。服务超过所选时长后将无法继续</p>
      <button class="know">我知道了</button>
    </div>
    <!--点击选时间的弹窗-->
    <div class="date-layer date-layer-time" style=" display:none;" id="timejson">
     
   </div>   
   <!---点击选日期的弹窗----> 
      <div class="date-layer" style=" display:none;" id="datejson">
     
   </div>   
  </div>
<form action="${pageContext.request.contextPath}/goods/buy.html" id="cleanForm" method="POST">
  <input type="hidden" name="serviceType" value="0"/>
  <input type="hidden" name="staffCount" id="staffCount"/>
  <input type="hidden" name="hours" id="hours"/>
  <input type="hidden" name="subDate" id="subDate"/>
  <input type="hidden" name="subTime" id="subTime"/>
  <input type="hidden" name="price"  id="price"/>
  <input type="hidden" name="fee"  id="feev"/>
  <!--底部--->
  <footer class="footer"> <span class="t-price">总额：￥<em id="fv">180.00元</em></span> <a href="javascript:void();" id="btn_sub"><span class="next">下一步</span></a></footer>
 </form>
</div>
<div class="login-layer" style=" display:none;" id="tip"> <span id="tipMsg"></span> </div>
</body>
<script>
var hArray = new Array(2,3,4,5,6,7,8,9);
var serverLong = 2;
var dv = '${CURRENT_VALUE}';
var tv = '08:30';
var s = 1;
var fee = 2 * 30.00;
$(document).ready(function(){
		$("#fv").text(fee + ".00元");
		$("#feev").val(fee);
		$("#price").val(30.00);
		$("#staffCount").val(1);
		$("#hours").val(serverLong);
		$("#subDate").val(dv);
		$("#subTime").val(tv);
		$(".p-num-foot span").click(function(){
				$(".p-num-foot span").removeClass("be-selected");
				$(this).addClass("be-selected").siblings().removeClass("be-selected");
		});
		
		$(".p-time-foot span").click(function(){
				$(".p-time-foot span").removeClass("be-selected");
				$(this).addClass("be-selected").siblings().removeClass("be-selected");
		});


		$(function(){
				$(".question").on("click",function(){
						$(".layer-help").show()
				})
				$(".know").on("click",function(){
						$(".layer-help").hide()
				})
		})
		
		$(function(){
				$(".p-d").on("click",function(){
					$("#timejson").hide()
					$.ajax({
						url : "${pageContext.request.contextPath}/goods/getTime/"+ dv + ".json",
						
						success : function(data) {
							if (data != 0) {
								
								$("dayValue").empty();
								$("dayValue").append(data.CURRENT_DATE);
								$("#time").empty();
								$("#time").append(data.CURRENT_TIME);
								$("#timejson").empty();
								$("#timejson").append(data.TIME_LIST);
								$("#datejson").empty();
								$("#datejson").append(data.DATE_LIST);
							}
						}
					});
						$("#datejson").show()
				})
				$(".p-t").on("click",function(){
					$("#datejson").hide()
					$.ajax({
						url : "${pageContext.request.contextPath}/goods/getTime/"+ dv + ".json",
						
						success : function(data) {
							if (data != 0) {
								
								
								$("dayValue").empty();
								$("dayValue").append(data.CURRENT_DATE);
								$("#time").empty();
								$("#time").append(data.CURRENT_TIME);
								$("#timejson").empty();
								$("#timejson").append(data.TIME_LIST);
								$("#datejson").empty();
								$("#datejson").append(data.DATE_LIST);
								
							}
						}
					});
						$("#timejson").show()
				})
				$(".date-layer li").on("click",function(){
						$("#datejson").hide()
				})
				
				
				$(".date-layer date-layer-time li").on("click",function(){
						$("#timejson").hide()
				})
		})
		
		$(".date-layer ul li").click(function(){
				$(".date-layer ul li").removeClass("time-selected");
				$(this).addClass("time-selected").siblings().removeClass("time-selected");
		});
		$("#btn_sub").click(function(){
			if(dv != 0) {   
		   		$("#cleanForm").submit();
			}
		   
		});
});
function setStaff(staff) {
	s = staff;
	fee = staff * serverLong * 30;
	$("#fv").text(fee + ".00元");
	$("#staffCount").val(s);
	$("#feev").val(fee);
}
function setHouse(index) {
	serverLong = hArray[index];
	fee = s * serverLong * 30;
	$("#fv").text(fee + ".00元");
	$("#hours").val(serverLong);
	$("#feev").val(fee);
}

function setDate(datev, weekDate) {
	dv = datev;
	$("#datejson").hide()
	$("#dayValue").text(weekDate);
	$("#subDate").val(datev);
}

function setTime(timeValue) {
	tv = timeValue;
	$("#time").text(timeValue);
	$("#subTime").val(timeValue);
	$(".date-layer-time").hide()
}

function close() {
 	setTimeout(function() {
 		$("#tip").hide();
 	}, 2000);
	}
	
</script>
</html>
